<template>

    <div class="login-wrap">
        <el-form class="login-container">
            <h1 class="title">寻真云盘用户登陆</h1>

            <el-form-item>
                <el-autocomplete v-model="email" :fetch-suggestions="querySearchEmail" :trigger-on-focus="false"
                    clearable prefix-icon="el-icon-user" placeholder="用户邮箱" style="width:100%"
                    @click.native="changeFlag()">
                </el-autocomplete>
                <div class="divMsg" v-if="msgFlag">邮箱格式不正确请重新输入!</div>
            </el-form-item>


            <el-form-item>
                <el-input placeholder="请输入验证码" v-model="code" style="width: 60%;">></el-input>
                <el-button type="primary" plain @click='sendCode' style="width: 40%" :disabled="getCodeBtnDisable">
                    {{ codeBtnWord }}
                </el-button>
               
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="btnLogin" style="width: 100%;">登陆</el-button>
            </el-form-item>

           

        </el-form>

    </div>
</template>
<script>
import loginAPI from '../api/login'
import Cookie from 'js-cookie'
const options = {
    data() {
        return {
            email: "",
            code: "",
            
            codeBtnWord: '获取验证码', // 获取验证码按钮文字
            waitTime: 60, // 获取验证码按钮失效时间
            getCodeBtnDisable: false,
            msgFlag: false,
            codeFlag: false,
            loginFlag: false
        }
    },
    methods: {
        //查询邮箱后缀
        querySearchEmail(queryString, callback) {
            const emailList = [
                { value: '@qq.com' },
                { value: '@163.com' },
                { value: '@gmail.com' },
                { value: '@foxmail.com' },
                { value: '@126.com' },
                { value: '@sina.com' },
                { value: '@outlook.com' },
                { value: '@shouhu.com' },
                { value: '@yahoo.cn' },
                { value: '@@live.com' },
            ]
            let results = []
            let queryList = []
            emailList.map(item => {
                queryList.push({ value: queryString.split('@')[0] + item.value })
            })
            results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList;
            callback(results);
        },

        // 邮箱填写过滤
        createFilter(queryString) {
            return (item) => {
                return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },

        //点击验证码发送
        sendCode() {
            try {
                let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg.test(this.email)) {
                    //邮箱不正确 展示错误 不发送验证码
                    this.msgFlag = true
                    return;
                }
                

                let params = {}
                params.email = this.email
                console.log(this.email)

                loginAPI.sendMsgApi(params).then()

                //let data = await axios.post('/sendMessage', params)
                this.$message.success('验证码发送成功')
                this.codeFlag = true
                this.loginFlag = true
                let that = this
                that.waitTime--
                that.getCodeBtnDisable = true
                this.codeBtnWord = `${this.waitTime}s 后重新发送`
                let timer = setInterval(function () {
                    if (that.waitTime > 1) {
                        that.waitTime--
                        that.codeBtnWord = `${that.waitTime}s 后重新发送`
                    } else {
                        this.codeFlag = false
                        clearInterval(timer)
                        that.codeBtnWord = '获取验证码'
                        that.getCodeBtnDisable = false
                        that.waitTime = 60
                    }
                }, 1000)
            } catch (res) {
                console.log(res)
            }
        },
        
        //点击登录方法
        btnLogin(){
            if(this.email && this.code && this.loginFlag){
                //邮箱和验证码都不为空的时候 并且已经发送邮件后
                let data = {}; 
                data.email = this.email; data.code = this.code;
                loginAPI.loginApi(data).then(res => {
                    console.log(res)

                    Cookie.set('token', res.headers.authorization,"7d")
                    this.$router.push("/home");
                })
            }else if( !this.email || !this.code){
                this.$message.error('请输入邮箱和验证码!')
            }else if( !this.loginFlag){
                //没发送验证码时
                this.$message.error('请获取验证码!')
            }

        },




        //点击输入框的时候 红色提示也消失
        changeFlag(){
            this.msgFlag = false
        }

    },
    computed: {
        // 用于校验邮箱格式是否正确
        emailStyle() {
            //邮箱校验格式
            let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if (!reg.test(this.email)) {
                this.msgFlag = false
            } else {
                this.msgFlag = true
            }

        }
    }


};
export default options;
</script>

<style>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.divMsg {
  font-size: 10px;
  color: #e94e3c;
  line-height: 10px;
  margin-top: 10px;
}
</style>